import React, { Component } from 'react'
import { Carousel } from 'antd-mobile';
import './Swiper.scss'
import { jsonToJson } from '../../../util/jsonToJson'
import axios from 'axios';
import { withRouter } from 'react-router-dom'
class Swiper extends Component {
    state = {
        data: [],
        imgHeight: 142,
        isShow: false
    }
    componentDidMount() {
        axios.get('jsonp/multiget/3?appPlat=m&pids=140378&callback=jsonp140378&_=1600506890296').then(res => {
            let data = jsonToJson(res.data)
            this.setState({
                data: data.data[140378].list,
                isShow: true
            })
        })
    }
    // 跳转轮播图详情页
    goSwipers = () => {
        this.props.history.push('/swiperdetails')
    }
    render() {
        return (
            this.state.isShow && (
                <Carousel
                    autoplay={true}
                    infinite
                    className='swiper'
                    dotStyle={{ background: '#fff' }}
                    dotActiveStyle={{ background: '#d4342e' }}
                >
                    {this.state.data && this.state.data.map(val => (
                        <div
                            key={val}
                            style={{ display: 'inline-block', width: '100%', height: '142px' }}
                            onClick={this.goSwipers}
                        >
                            <img
                                src={val.image_800}
                                alt=""
                                style={{ width: '100%', verticalAlign: 'top' }}
                                onLoad={() => {
                                    // fire window resize event to change height
                                    window.dispatchEvent(new Event('resize'));
                                    this.setState({ imgHeight: 'auto' });
                                }}
                            />
                        </div>
                    ))}
                </Carousel>
            )
        );
    }
}
export default withRouter(Swiper)